<template>
	<view>
		<view class="collect-box">
			<view class="first-row">
				<view class="folder-title">{{$t('mine.collect.last')}}</view>
				<view style="color:rgba(16,16,16,0.6);">{{$t('mine.collect.more')}}</view>
				<!-- <image></image> -->
			</view>
			<view class="contain-box">
				<view v-for="(item , index) in image" :key="index" class="every-box">
					<image :src="item.image" class="img-style" alt="img" mode="aspectFill"></image>
					<view class="title-style">{{item.desc}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref,defineProps } from 'vue'
	import { Product } from '@/types/types'
	const props = defineProps<{
		product:Product[]
	}>()
	const image = ref(props.product.slice(0,3))
	
	
</script>

<style lang="scss" scoped>
	.collect-box {
		background-color: rgba(255,255,255,0.72);
		width: 100%;
		border-radius: 0.75rem;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
		box-sizing: border-box;
		padding: 0.5rem;
		font-size: 0.75rem;
	}

	.first-row {
		display: flex;
		justify-content: space-between;
	}

	.folder-title {
		color: rgba(16, 16, 16, 1);
	}
	.contain-box{
		display: flex;
		justify-content:space-around;
		margin-top: 0.3rem;
	}
	.every-box{
		border-radius: 0.63rem;
		background-color: #fff;
		text-align: center;
		box-sizing: border-box;
		padding: 0.5rem;
		margin: 0 0.2rem;
	}
	.img-style{
		width: 6rem;
		height: 4rem;
		border-radius: 0.63rem;
	}
	.title-style{
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
</style>